<template>
  <div>

    <h1>购物车</h1>
    <!--表格-->
    <el-table :data="cartList" border style="width: 100%">
      <el-table-column prop="product.name" label="商品名" width="180"/>
      <el-table-column prop="product.price" label="单价"/>
      <el-table-column prop="product.address" label="产地"/>
      <el-table-column label="数量">
        <template #default="scope">
          <input type="number" v-model="scope.row.num" @blur="update(scope.row)">
        </template>
      </el-table-column>
      <el-table-column  label="单项总价">
        <template #default="scope">
          {{scope.row.num*scope.row.product.price}}
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="small" type="danger" @click="remove(scope.row.id)">移除商品</el-button>
        </template>
      </el-table-column>
    </el-table>
<p>  总价：￥ {{total}}</p>

    <div>
      <a href="/index">继续购物</a> <a href="javascript:void(0)" @click="$router.push({name:'/shopping/addOrder'})">结账</a>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      cartList:{},
      total:0
    }
  }, methods: {
    showCart(){
      axios.get("/project/cart/findCart").then(resp=>{
        this.cartList=resp.data;
        this.getTotal();
      })
    },getTotal(){
      var total=0;
      this.cartList.forEach(c=>{
        total+= c.num*c.product.price;
      })
      this.total=total;
    },update(cart){
      axios.get("/project/cart/update",{params:{id:cart.id,num:cart.num}}).then(resp=>{
        if (resp.data=="ok"){
          this.showCart();
        }
      })
    },remove(id){
      axios.get("/project/cart/remove",{params:{id}}).then(resp=>{
        if (resp.data=="ok"){
          this.showCart();
        }
      })
    }
  },created(){
    this.showCart();
  }
}
</script>

<style scoped>
a{
  margin-left: 20px;
}
</style>